<script setup>
    import { provide, onMounted } from 'vue'

    import ProjectMap from './components/ProjectMap.vue'
    import LeftCard from '../../components/LeftCard.vue'
    import ProjectList from './components/ProjectList.vue'
    import ProjectInfo from './components/ProjectInfo.vue'
    import ProjectArchives from './components/ProjectArchives.vue'
    import ProjectArea from './components/ProjectArea.vue'

    import { getTownsAndProjectCount } from '@/api/home'

    // 需要显示的 窗口名称
    let showDialogName = $ref('')

    let projectList = $ref(null)

    // 点击左侧列表
    let projectMap = $ref(null)
    const handleClick = (name) => {
        projectMap.setMapCenterPoint(name)
    }
    
    const updateDialogName = (e = '') => {
        showDialogName = e
    }

    provide('close', updateDialogName)

    onMounted(() => {
        getAreaList()
    })

    // 数据加载中
    let dataLoading = $ref(true)

    // 皱城市区域列表
    let townList = $ref([])
    let townListCopy = []
    const getAreaList = () => {
        getTownsAndProjectCount().then(res => {
            dataLoading = false
            townList = res.result.townsList
            townListCopy = res.result.townsList
        })
    }

    // 区域搜索
    const areaSearch = (keyword) => {
        let data = JSON.parse(JSON.stringify(townListCopy))
        if(!keyword){
            townList = data
            return
        }
        townList = data.filter((item) => {
            if(item.townsName.indexOf(keyword) > -1){
                return item
            }
        })
    }

    // 显示项目列表
    const showProjectList = (id)  => {
        updateDialogName('list')
        projectList.handleSearch(id)
    }



</script>

<template>
    <div class="project-manage-wrap" v-loading="dataLoading">
        <project-map 
            v-if="!dataLoading" 
            :townList="townList" 
            ref="projectMap"
            @showList="showProjectList"
        ></project-map>

        <div class="suspended-content-warp">

            <left-card @areaSearch="areaSearch">
                <div 
                    class="town-item font-b pointer"
                    v-for="(item, index) in townList"
                    :key="index"
                    @click="handleClick(item.townsName)"
                >
                    {{ item.townsName }}({{ item.counts }})
                </div>
            </left-card>

            <!-- 项目列表 -->
            <project-list 
                v-show="showDialogName=='list'"
                ref='projectList'
            ></project-list>

            <!-- 项目基本信息 -->
            <project-info v-if="showDialogName=='info'"></project-info>

            <!-- 档案管理 -->
            <project-archives v-if="showDialogName=='archives'"></project-archives>

            <!-- 所在区域 -->
            <project-area v-if="showDialogName=='area'"></project-area>

        </div>

    </div>
</template> 

<style lang="less" scoped>
    .project-manage-wrap{
        width: 100%;
        height: 100%;
        position: relative;

        .town-item{
            padding: 10px 20px;
            height: 40px;
            line-height: 20px;
            font-size: 18px;

            &:hover{
                text-shadow: 0 0 2px #52CCFF;
            }
        } 
    }
</style>